<template>
  <el-row>
    <el-col :span="24">
      <RemarkForm v-model="reason"
                  :placeholder="placeholder" />
    </el-col>
    <el-col :span="24">
      <div class="footer">
        <el-button type="default"
                   @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="handleSubmit">确定</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { dialogFulfill } from '@tablra/fulfill/executors/RequestExecutor'
import axios from 'axios'

export default {
  name: "BatchReject",
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    method: {
      type: String,
      default () {
        return "PUT"
      }
    },
    url: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default () {
        return "请输入原因";
      }
    },
    field: {
      type: String,
      default () {
        return "reason"
      }
    }
  },
  data () {
    return {
      loading: false,
      reason: null,
      disabled: false,
    }
  },
  computed: {
    idCountExceeded () {
      return this.data?.waybillIds?.length || 0
    },
    taskUrl () {
      return `/tenant/task/{id}`
    },
  },
  methods: {
    handleSubmit () {
      if (!this.reason) {
        return this.$message({ type: 'error', message: this.placeholder })
      }
      this.loading = true;
      this.submit();
    },
    async submit () {
      const response = await this.batchRefuse()
      if (response) {
        this.$emit("cancel");
        const component = {
          taskUrl: this.taskUrl,
          count: this.idCountExceeded,
          name: `批量拒绝`,
          id: response
        };
        dialogFulfill.invoke(component);
      }
    },
    async batchRefuse () {
      try {
        const reason = {
          name: '批量拒绝',
          ...this.data
        }
        reason[this.field] = this.reason;
        const response = await axios({
          method: this.method,
          url: this.url,
          data: reason,
        })
        if (response?.code === 0) {
          if (!response?.data) {
            this.loading = false
            this.$emit("confirm");
            this.$message({ type: "success", message: "操作成功" });
          }
          return response?.data;
        } else {
          this.loading = false
          this.$message({ type: "error", message: response?.message });
        }
      } catch {
        this.loading = false;
      }
    },
    handleCancel () {
      this.reason = null;
      this.$emit("cancel");
    }
  }
}
</script>

<style scoped>
</style>